<template>
    <div class="mui-content" >
      <div class="wrapper">
        <div class="title mui-text-center">教师端注册</div>
        <div class="mui-text-center form" v-show="!bottomShow">
          <div class="input"><input type="text" placeholder="姓名"  v-model="userName"></div>
          <div class="input"><input type="text" placeholder="单位" v-model="WorkUnit" @click.stop="goOut()">
          </div >
          <div >
            <div class="input"><input disabled type="text" placeholder="注册手机" v-model="phone" maxlength="11"></div>
            <div class="input wrapper-user"><input type="text" placeholder="验证码" v-model="phoneCode">
              <button type="button" :disabled="disabled" class='phoneRegist' @click="checkPhone" >{{btntxt}}</button>
            </div>
            <div class="mui-text-left" style="padding-left: 4%">初始密码：</div>
            <div class="input">
              <input type="text" v-model="password" placeholder="请输入初始密码"></div>
            <button class="button" @click="regist" :class=isOK>
              注册
            </button>
          </div>
        </div>
      </div>

      <workCity v-on:Unit="Unit($event)" v-if="bottomShow" ></workCity>
      <transition name="fade">
        <Prompt
          title="错误"
          :msg=mistakeMsg
          confirm="确定"
          v-on:confirm1="confirm1($event)"
          v-if="mistake"
        >
        </Prompt>
      </transition>
    </div>
</template>

<script>
  import mui from '../../static/utils/mui'
  import workCity from './common/unitSelect'
  // import  {zcServer}from '../common/js/zcServer.js'
  import  Prompt from '@components/common/Prompt.vue'

    export default {
        name: "Regist.vue",
      components:{
        workCity,
        Prompt
      },
        data(){
          return {
            UserId:'',
            regist2:false,
            isOK:'ui',
            mistakeMsg:'',
            mistake:false,
            itemText:'',
            userName:'',
            password:'0000',
            WorkUnit:'',
            WorkUnitSN:'',
            phoneCode:'',
            VerifyCode:"",
            phone:'',
            time:0,
            btntxt:"获取验证码",
            disabled:false,
            registdisabled:false,
            selec:0,
            arr:[],
            arr2:[],
            classe:[],
            classe1:[],
            bottomShow:false,
            formData:{},
            ulShow1:true,
            ulShow2:false,
            ulShow3:false,
            selectList1:{},
            OrganCode:'',
            DeviceCode:'',
            OpenId:''
        }
      },
      props:{
        isResource:{
          type:Boolean,
          default:false
        }
      },
      created() {
        let me = this;
        let ZcSoft_WxOpenId_VueBind_Info = localStorage.getItem('ZcSoft_WxOpenId_VueBind_Info');
        if(ZcSoft_WxOpenId_VueBind_Info){
          ZcSoft_WxOpenId_VueBind_Info = JSON.parse(ZcSoft_WxOpenId_VueBind_Info);

          if(ZcSoft_WxOpenId_VueBind_Info){
            me.OrganCode = ZcSoft_WxOpenId_VueBind_Info.OrganCode;
            me.DeviceCode = ZcSoft_WxOpenId_VueBind_Info.DeviceCode;
            me.OpenId = ZcSoft_WxOpenId_VueBind_Info.OpenId;
            me.$Global.UserId =  me.OpenId;
          }
        }
        me.phone=localStorage.getItem('myPhone');
        me.phoneCode='';
      },
      methods:{
        confirm1(){
          this.mistake=false
        },
        Unit(change){
          console.log(change)
          // if(change.outKey==0){
          this.WorkUnit=change.WorkUnit
          this.WorkUnitSN=change.WorkUnitSN
          this.bottomShow=false
          // }

        },

        regist(){
          let me=this;
          if(me.userName&&me.WorkUnit&&me.password&&me.phoneCode){
            me.isOK='isOK';
            me.$Global.zcServer.Post({
              UserId:me.$Global.UserId,
              IsNeedLogin: 'false',
              Paras:{
                UserId:me.$Global.UserId ,
                Name:'Vue_CourseResource',
                action:"Ext_ResourceManagement_Register",
                Data:{
                  "UserName": me.userName,
                  "WorkUnitSN": me.WorkUnitSN,
                  "InitPass": me.password,
                  "Telephone": me.phone,
                  "OrganCode": me.OrganCode,
                  "VerifyCode": me.phoneCode
                }
              },
              Callback:me.cb_regist,
              Scope:me,
            });
          }
        },

        checkPhone(){
          try{
            let me=this;
            let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if(me.phone===''){
              me.mistake=true;
              me.mistakeMsg="请输入手机号"
            }else if(!reg.test(me.phone)){
              alert("手机格式不正确");
            } else{
              me.time=60;
              me.disabled=true;
              me.timer();
              me.$Global.zcServer.Post({
                IsNeedLogin: 'false',
                Paras: {
                  UserId:me.$Global.UserId ,
                  action: "SMSCode",
                  name: "Vue_CourseResource",
                  Data: {
                    OrganCode: "01",
                    Telephone: me.phone
                  }
                },
                callback: me.cb_registCode,
                Scope:me,
              });
            }
          }catch (e) {

          }

        },
        timer() {
          if (this.time > 0) {
            this.time--;
            this.btntxt=this.time+"s后重新获取";
            setTimeout(this.timer, 1000);
          } else{
            this.time=0;
            this.btntxt="获取验证码";
            this.disabled=false;
          }
        },
        /*回调函数*/
        cb_regist(resJson,scope){
          console.log(resJson)
          if(resJson.success==false){
            this.mistake=true;
            this.mistakeMsg=resJson.msg
          }else {
            // alert(this.isResource)

            if(this.isResource==false){
              if(this.$route.query.redirect){
                this.$router.replace({path:this.$route.query.redirect})
              }else {
                this.$router.push('/Index')
              }

            }
            else {
              this.regist2=true
              this.$emit("registFn",this.regist2)
            }
            localStorage.setItem("myName",this.userName);
            localStorage.setItem("WorkUnitName",this.WorkUnit);
            localStorage.setItem("WorkUnitSN",this.WorkUnitSN);
          }
        },
        cb_registCode(resJson,scope){
          console.log("验证码")
          console.log(resJson)
        },
        goOut(){
          // this.selec=!this.selec;
          this.bottomShow=true;
        },
      },
      updated(){
        let me=this
        if(me.userName&&me.WorkUnit&&me.password&&me.phoneCode) {

          me.isOK = 'isOK';
        }else {
          me.isOK = '';
        }
      }
    }
</script>

<style scoped>
  .mui-content{
    position: absolute ;
    left: 0 ;
    right: 0;
    top: 0;
    bottom: 0 ;
    background: url(../assets/img/zc_home2.png) no-repeat ;
    background-size: 100% 100% ;
  }
  .mui-content .title{
    height: 30vh;
    line-height: 30vh;
    color: white;
    font-size: 1.1rem;

  }
  .mui-content .form input{
    width: 92%;
    border:1px solid rgba(93, 194, 240, 1);
    height: 40px;
    border-radius: 5px;
    margin-top: 0px;
  }
  .mui-content .form {
    margin-top: 3vh;
    border-radius: 5px;
  }

  .mui-content .form button{
    width: 92%;
    border:1px solid rgba(93, 194, 240, .6);
    margin-top: 10px;
    height: 40px;
    line-height: 30px;
    background-color:rgba(93, 194, 240, .6);

    color: white;
   word-spacing: 10px;
    background-color:rgba(93, 194, 240, .6);
  }
  .mui-content .form .isOK{
    background-color:rgba(93, 194, 240, 1);
  }
  .mui-content .input{
    display: inline;
  }
  .mui-content  .wrapper-user input{
    height: 39px;
  }
  .mui-content  .wrapper-user button{
    /*width: 32%;*/
    position: absolute;
    width: 30%;
    right: 5%;
    margin-top: 4px;
    background-color: rgba(93, 194, 240, 1);
    border-radius: 70px;
    color: white;
    height: 32px;
    line-height: 20px;
  }


</style>
